// 函数组件封装
import { createVNode, render } from 'vue'
import _Message from './index.vue'

function Message ({ type, text }) {
  // 核心逻辑
  // 1. 使用createVNode把一个组件生成虚拟dom节点
  // 2. 准备一个挂载的节点-手动创建一个节点出来
  // 3. 使用render完成挂载 让弹框组件显示到页面中
  const VNode = createVNode(_Message, {
    type,
    text
  })

  const container = document.createElement('div')
  document.body.appendChild(container)

  render(VNode, container)

  // 1s中之后消失
  setTimeout(() => {
    render(null, container)
  }, 1000)
}

export default Message

// 优势：调用时机灵活

// <Message/> 渲染的时机是跟着父组件的template渲染走的
// 这是一个自动的操作 不受开发者控制

// Message() 喜欢在哪里调用就在哪里调用 异步返回之后调用起来 点击事件之后调用起来
// 渲染时机是完全由我们来决定的！！
